<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青岛市城阳区儿童青少年近视防控大数据平台</title>
    <link rel="stylesheet" href="/css/index.css" />
</head>

<style>
    #zt:hover{
        cursor: pointer;
    }
</style>
<body style="background-color: #06164A;">
<header>
    <h1>青岛市城阳区儿童青少年近视防控大数据平台</h1>
    <div class="showTime">当前时间：2021年12月<span></span></div>
</header>
<section class="mainbox">
    <div class="column">
        <div class="panel pie">
            <h2 id="fbl"></h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel bar">
            <h2 id="zuoxia">2021年患病率</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="no">
            <div class="no-hd">
                <ul>
                    <li id="totalNum">125811</li>
                    <li id="shaiChaNum">1245</li>
                    <li id="liuDiaoNum">1645</li>
                </ul>
            </div>
            <div class="no-bd">
                <ul>
                    <li id="zt">总体</li>
                    <li>筛查</li>
                    <li>流调</li>
                </ul>
            </div>
        </div>
        <div class="map">
            <div id="map_table" class="chart"><div id="mainMap"></div></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div class="tiaozuan">
                <p><span>进入子系统</span></p>
                <ul>
                    <li><a href="http://shaicha.dddmaker.com" target="_blank">筛查</a></li>
                    <li><a href="http://liudiao.dddmaker.com" target="_blank">流调</a></li>
                    <li><a href="http://121.36.8.243:8058" target="_blank">社区</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="panel bra1">
            <h2 id="youshang">不同学部近视患病率</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line1" style="overflow: hidden;">
            <div id="gundong" class="HHMarquee-top">

            </div>
        </div>
    </div>
    <!--=========折现弹框===========-->
    <div class="popTk">
        <div class="popBlack"></div>
        <div class="panel line" id="popLine">
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>

</section>
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/flexible.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/index.js"></script>
<script type="text/javascript" src="/js/shandong.js"></script>
<script src="/js/citymap.js"></script>
<script src="/js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>

<script>
    (function (fn) {
        fn();
        setInterval(fn, 1000);
    })(function () {
        var dt = new Date();
        document.querySelector(".showTime span").innerHTML =
            dt.getDate() + "日-" +
            dt.getHours() + "时" +
            dt.getMinutes() + "分" +
            dt.getSeconds() + "秒";
    });
    var date = new Date();
    var month = date.getMonth()+1;
    if (month<=6){
        var year = date.getFullYear();
        $("#fbl").text(year+'年发病率预测')
    }
    if (month>6){
        var year = date.getFullYear()+1;
        $("#fbl").text(year+'年发病率预测')
    }
    var checkCity='青岛市';
    var checkArea='';
    //地图容器
    // var chart = echarts.init(document.getElementById('mainMap'));

    //34个省、市、自治区的名字拼音映射数组
    var provinces = {

        "青岛市": "370200"

    };



    //直辖市和特别行政区-只有二级地图，没有三级地图
    var mapdata = [];
    //绘制全国地图
    $.getJSON('/map/city/370200.json', function(data){
        d = [];
        for( var i=0;i<data.features.length;i++ ){
            d.push({
                name:data.features[i].properties.name
            })
        }
        mapdata = d;
        //注册地图
        echarts.registerMap('青岛市', data);
        //绘制地图
        renderMap2('青岛市',d);

    });
    $("#zt").click(function (){
        if (checkCity !='' && checkArea!=''){
            $("#map_table").html(`<div id="mainMap"></div>`);

            $.getJSON('/map/city/'+ cityMap[checkCity] +'.json', function(data){
                echarts.registerMap( checkCity, data);
                var d = [];
                for( var i=0;i<data.features.length;i++ ){
                    d.push({
                        name:data.features[i].properties.name
                    })
                }
                checkArea='';
                renderMap2(checkCity,d);
            });
        }
        if (checkCity !='' && checkArea==''){
            $.getJSON('/map/province/370200.json', function(data){
                d = [];
                for( var i=0;i<data.features.length;i++ ){
                    d.push({
                        name:data.features[i].properties.name
                    })
                }
                mapdata = d;
                //注册地图
                echarts.registerMap('青岛市', data);
                //绘制地图
                checkCity='';
                renderMap1('青岛市',d);
            })
        }
    })
    /*$("#zt").mouseover(function (){
        $("#zt").style.cursor='hand';
    })
    $("#zt").mouseout(function (){
        $("#zt").style.cursor='normal';
    })*/
    //地图点击事件


    //初始化绘制全国地图配置 地图显示的数据

    function renderMap1(map,data) {
        //var chart = echarts.init(document.getElementById('mainMap'));
        //地图
        setTimeout(function () {
            var chart = echarts.init(document.getElementById('mainMap'));
            chart.clear();
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/DataQD',
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    var mapDataList = [
                        {name: '青岛市', value: data.QingDaoShi},
                    ]

                    var option = {
                        visualMap: {
                            min: 0,
                            max: 2,
                            text: ['High', 'Low'],
                            pieces: [{
                                value: 0, color: '#99ef85'
                            }, {
                                value: 1, color: '#fdef75'
                            }, {
                                value: 2, color: '#fe7d7a'
                            }],
                            realtime: false,
                            calculable: true,
                            inRange: {
                                color: ['#99ef85', '#fdef75', '#fe7d7a']
                            }
                        },
                        title: {
                            left: 'center',
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: 'normal',
                                fontFamily: "Microsoft YaHei"
                            },
                            subtextStyle: {
                                color: '#ccc',
                                fontSize: 13,
                                fontWeight: 'normal',
                                fontFamily: "Microsoft YaHei"
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params){

                                var myseries = option.series;
                                for (var i = 0; i < myseries.length; i++) {
                                    for(var j=0;j<myseries[i].data.length;j++){
                                        if(myseries[i].data[j].name==params.name){
                                            var res = params.name+'<br/>';
                                            for (let k= 0; k< mapDataList.length; k++) {
                                                if (mapDataList[k].name==myseries[i].data[j].name){
                                                    res+=mapDataList[k].value+'</br>';
                                                }
                                            }

                                        }
                                    }
                                }
                                return res;
                            }
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            iconStyle: {
                                normal: {
                                    color: '#fff'
                                }
                            }
                        },
                        animationDuration: 1000,
                        animationEasing: 'cubicOut',
                        animationDurationUpdate: 1000

                    };
                    var totalNum = data.totalNum ;
                    $("#totalNum").text(totalNum);
                    $("#shaiChaNum").text(data.shaiChaNum);
                    $("#liuDiaoNum").text(data.liuDiaoNum);
                    option.series = [
                        {
                            name: map,
                            type: 'map',
                            mapType: map,
                            roam: false,
                            nameMap: {
                                'qingdao': '青岛'
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#999',
                                        fontSize: 13
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 13
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {//未选中状态
                                    borderWidth: 1,//边框大小
                                    borderColor: '#0a718a',
                                    areaColor: '#142957',//背景颜色
                                    label: {
                                        show: true,//显示市名称
                                        color: '#3ed4ff'
                                    }
                                },
                                emphasis: {// 选中样式
                                    borderWidth: 1,
                                    borderColor: '#0a718a',
                                    areaColor: '#0b1c2d',
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#ffa022'
                                        }
                                    }
                                }
                            },
                            data: [
                                {name: '青岛市', value: data.QingDaoShiJS},
                            ]
                        }
                    ];
                    //渲染地图

                    //chart.setOption(option);
                    chart.off('click');
                    chart.on('click', function (params) {
                        console.log( params );
                        if( params.name in provinces ){
                            //显示县级地图

                            $.getJSON('/map/city/'+ cityMap[params.name] +'.json', function(data){
                                echarts.registerMap( params.name, data);
                                var d = [];
                                for( var i=0;i<data.features.length;i++ ){
                                    d.push({
                                        name:data.features[i].properties.name
                                    })
                                }
                                checkCity=params.name;
                                //alert(checkCity)
                                renderMap2(params.name,d);
                            });
                        }
                    });
                }

            })
        })
        //发病比例  预测部分
        /*setTimeout(function (){
            var myChart = echarts.init(document.querySelector(".pie .chart"));
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/ManAndWomenCount?checkCity=' + checkCity + '&checkArea=' + checkArea,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    option ={
                        color: ["#2f89cf"],
                        tooltip: {
                            trigger: "axis",
                            formatter: "{a} <br/>{b}: {c}%",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: "0%",
                            top: "10px",
                            right: "0%",
                            bottom: "4%",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: ['假性近视','近视临床前期','真性近视'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                min: 0,
                                max: 100,
                                axisLabel: {
                                    formatter: '{value} %',
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                        // width: 1,
                                        // type: "solid"
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "发病率",
                                type: "bar",
                                barWidth: "50%",
                                data: [data.jxfabinglv,data.lcfabinglv,data.zxfabinglv],
                                itemStyle: {
                                    normal:{
                                        color: function (params){
                                            var colorList = ['rgb(100,155,182)','rgb(173,91,91)','rgb(246,185,29)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    barBorderRadius: 0,

                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });


        })*/
        //筛查流调患病比例  左下部分
        /*setTimeout(function () {
            var myChart = echarts.init(document.querySelector(".bar .chart"));
            $("#zuoxia").text('2021年患病率')

            // 指定配置和数据
            var option = {
                color: ["#f8b448", "#2f89cf"],
                tooltip: {
                    trigger: "axis",
                    formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    top: "10%",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                legend: {
                    top: 0,
                    left: 'center',
                    data: ['筛查', '流调'],
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: ["视力低下", "远视", "临床前期", "假性近视", "真性近视"],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %',
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                                // width: 1,
                                // type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "筛查",
                        type: "bar",
                        barWidth: "20%",
                        data: [64.29, 0, 28.57, 42.86, 28.57],
                        itemStyle: {barBorderRadius: 0}
                    }, {
                        name: "流调",
                        type: "bar",
                        barWidth: "20%",
                        data: [0, 0, 0, 0, 0],
                        itemStyle: {barBorderRadius: 0}
                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
        })*/
        //不同学部近视患病率  右上部分
        setTimeout(function () {
            var myChart = echarts.init(document.querySelector(".bra1 .chart"));
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/XueBuHuanBingLvQD?checkCity=' + checkCity,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    var option = {
                        color: ["#2f89cf"],
                        tooltip: {
                            trigger: "axis",
                            formatter: "{a} <br/>{b}: {c}%",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: "0%",
                            top: "10px",
                            right: "0%",
                            bottom: "4%",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: ['幼儿园', '小学', '初中', '高中', '总体'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                min: 0,
                                max: 100,
                                axisLabel: {
                                    formatter: '{value} %',
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                        // width: 1,
                                        // type: "solid"
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "患病率",
                                type: "bar",
                                barWidth: "50%",
                                data: [data.youBLv, data.xiaoBLv, data.chuBLv, data.gaoBLv, data.zBLv],
                                itemStyle: {
                                    barBorderRadius: 0,

                                }
                            }
                        ]
                    };

                    // 把配置给实例对象
                    myChart.setOption(option);
                }
            })
        });

        /*省级右下
        $("#gundong").html(`<h2>青岛市2021年筛查近视患病率</h2>
                    <div class="hd">
                        <ul>
                            <li class="HHup" id="HHnext"><a class="next"></a></li>
                            <li class="HHdown" id="HHprev"><a class="prev"></a></li>
                            <li>序号</li>
                            <li>城市</li>
                            <li>近视率</li>
                        </ul>
                    </div>
                    <div class="bd">
                        <ul class="infoList">
                            <li><span class="num">1</span><span class="name">青岛市</span><span class="shuL">64.3%</span></li>
                        </ul>
                    </div>`)
        jQuery(".HHMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:7,interTime:50});*/
    }
    function renderMap2(map,data){
        $("#zuoxia").text('2021年筛查患病率')
        var chart = echarts.init(document.getElementById('mainMap'));

        var areaList=[];
        for (let i = 0; i < data.length; i++) {
            areaList.push(data[i].name)
        }
        //绘制市级地图  市级地图显示数据
        $.ajax({
            cache : true,
            type : "GET",
            async:false,
            url : '/xinshineng/shouYe/AreaDataQD?checkCity='+map+'&areaList='+areaList,
            error : function(request) {
                parent.layer.alert("网络超时");
            },
            success : function(data) {
                var mapDataList = [];
                var dataList = [];
                for (let i = 0; i < areaList.length; i++) {
                    var areaName = areaList[i];
                    var jslName = areaName+'JS';
                    var areaData = data[jslName];
                    var mapData=data[areaName];
                    mapDataList.push({name:areaName.toString(),value:mapData});
                    dataList.push({name:areaName.toString(),value:areaData});
                }
                var option = {
                    visualMap: {
                        min: 0,
                        max: 2,
                        text: ['High', 'Low'],
                        pieces: [{
                            value: 0, color: '#99ef85'
                        }, {
                            value: 1, color: '#fdef75'
                        }, {
                            value: 2, color: '#fe7d7a'
                        }],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#99ef85', '#fdef75', '#fe7d7a']
                        }
                    },
                    title : {
                        left: 'center',
                        textStyle:{
                            color: '#fff',
                            fontSize:16,
                            fontWeight:'normal',
                            fontFamily:"Microsoft YaHei"
                        },
                        subtextStyle:{
                            color: '#ccc',
                            fontSize:13,
                            fontWeight:'normal',
                            fontFamily:"Microsoft YaHei"
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params){

                            var myseries = option.series;
                            for (var i = 0; i < myseries.length; i++) {
                                for(var j=0;j<myseries[i].data.length;j++){
                                    if(myseries[i].data[j].name==params.name){
                                        var res = params.name+'<br/>';
                                        for (let k = 0; k < mapDataList.length; k++) {
                                            if (mapDataList[k].name==myseries[i].data[j].name){
                                                res+=mapDataList[k].value+'</br>';
                                            }
                                        }

                                    }
                                }
                            }
                            return res;
                        }
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        iconStyle:{
                            normal:{
                                color:'#fff'
                            }
                        }
                    },
                    animationDuration:1000,
                    animationEasing:'cubicOut',
                    animationDurationUpdate:1000

                };
                /*var mapData = [];
                for (let i = 0; i < areaList.length; i++) {
                    var area =  areaList[i];
                    mapData.push({name:area.toString(),value:data[area]})
                }*/
                option.series = [
                    {
                        name: map,
                        type: 'map',
                        mapType: map,
                        roam: false,
                        nameMap:{
                            'shandong':'山东'
                        },
                        label: {
                            normal:{
                                show:true,
                                textStyle:{
                                    color:'#999',
                                    fontSize:13
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle:{
                                    color:'#fff',
                                    fontSize:13
                                }
                            }
                        },
                        itemStyle: {
                            normal: {//未选中状态
                                borderWidth:1,//边框大小
                                borderColor:'#0a718a',
                                areaColor: '#142957',//背景颜色
                                label: {
                                    show: true,//显示市名称
                                    color:'#3ed4ff'
                                }
                            },
                            emphasis: {// 选中样式
                                borderWidth:1,
                                borderColor:'#0a718a',
                                areaColor: '#0b1c2d',
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#ffa022'
                                    }
                                }
                            }
                        },
                        data: dataList
                    }
                ];
                chart.clear();
                //渲染地图
                chart.off('click');
                chart.on('click', function (params) {
                    console.log( params );
                    if( params.name in provinces ){
                        //显示县级地图
                        $.getJSON('/map/city/'+ cityMap[params.name] +'.json', function(data){
                            echarts.registerMap( params.name, data);
                            var d = [];
                            for( var i=0;i<data.features.length;i++ ){
                                d.push({
                                    name:data.features[i].properties.name
                                })
                            }
                            checkCity=params.name;
                            renderMap2(params.name,d);
                        });
                    }else{

                        checkArea=params.name;

                        $.ajax({
                            cache : true,
                            type : "GET",
                            async:false,
                            url : '/xinshineng/shouYe/SchoolDataQD?checkCity='+checkCity+'&checkArea='+checkArea,
                            error : function(request) {
                                parent.layer.alert("网络超时");
                            },
                            success : function(data) {
                                var html1='<div class="m-demo">' +
                                    '<table cellpadding="0" cellspacing="0">' +
                                    '<thead>' +
                                    '<tr>' +
                                    '<th>检查时间</th>' +
                                    '<th>学校名称</th>' +
                                    '<th>筛查人数</th>' +
                                    '<th>流调人数</th>' +
                                    '<th>筛查临床前期</th>' +
                                    '<th>筛查假性近视</th>' +
                                    '<th>筛查真性近视</th>' +
                                    '<th>流调临床前期</th>' +
                                    '<th>流调假性近视</th>' +
                                    '<th>流调真性近视</th>' +
                                    '</tr>' +
                                    '</thead>' +
                                    '</table>' +
                                    '<div class="scroll"><table cellpadding="0" cellspacing="0">' +
                                    '<tbody>';
                                var html3='</tbody>' +
                                    '</table>' +
                                    '</div>' +
                                    '</div>';
                                var html2='';
                                data.length.fori
                                for (let i = 0; i < data.length; i++) {
                                    var href='/skip/schoolQD?school='+data[i].school+'&CityName='+checkCity+'&AreaName='+checkArea+'&checkdate='+data[i].check_time+'&checkType='+data[i].checkType;
                                    html2 += '<tr>'+
                                        '<td>'+data[i].check_time+'</td>'+
                                        '<td><a href='+href+'>'+data[i].school+'</a>'+'</td>'+
                                        '<td>'+data[i].num+'</td>' +
                                        '<td>'+data[i].ldNum+'</td>' +
                                        '<td>'+data[i].sclcLv+'%'+'</td>' +
                                        '<td>'+data[i].scjxLv+'%'+'</td>' +
                                        '<td>'+data[i].sczxLv+'%'+'</td>' +
                                        '<td>'+data[i].ldlcLv+'%'+'</td>' +
                                        '<td>'+data[i].ldjxLv+'%'+'</td>' +
                                        '<td>'+data[i].ldzxLv+'%'+'</td>' +
                                        '</tr>'
                                }
                                $("#map_table").html(
                                    html1+html2+html3
                                )

                                var html3=`<h2>近两年历次筛查近视率</h2>
                            <div class="hd">
                            <ul>
                            <li class="HHup" id="HHnext"><a class="next"></a></li>
                            <li class="HHdown" id="HHprev"><a class="prev"></a></li>
                            <li>检查时间</li>
                            <li>学校</li>
                            <li>近视率</li>
                            </ul>
                            </div>
                            <div class="bd">
                            <ul class="infoList">`;
                                var html4=``;
                                for (let i = 0; i < data.length; i++) {
                                    html4+=`<li><span class="num">`+data[i].check_time+`</span><span class="name">`+data[i].school+`</span><span class="shuL">`+data[i].sczxLv+`%</span></li>`
                                }
                                var html5 = html3+html4+`</ul></div>`;
                                $("#gundong").html(html5);
                                jQuery(".HHMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:7,interTime:50});
                            }
                        })

                        //不同性别患病比例
                        setTimeout(function (){
                            var myChart = echarts.init(document.querySelector(".pie .chart"));
                            $.ajax({
                                cache: true,
                                type: "GET",
                                async: false,
                                url: '/xinshineng/shouYe/ManAndWomenCount?checkCity=' + checkCity + '&checkArea=' + checkArea,
                                error: function (request) {
                                    parent.layer.alert("网络超时");
                                },
                                success: function (data) {
                                    option ={
                                        color: ["#2f89cf"],
                                        tooltip: {
                                            trigger: "axis",
                                            formatter: "{a} <br/>{b}: {c}%",
                                            axisPointer: {
                                                // 坐标轴指示器，坐标轴触发有效
                                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        grid: {
                                            left: "0%",
                                            top: "10px",
                                            right: "0%",
                                            bottom: "4%",
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: "category",
                                                data: ['假性近视','近视临床前期','真性近视'],
                                                axisTick: {
                                                    alignWithLabel: true
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    show: false
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: "value",
                                                min: 0,
                                                max: 100,
                                                axisLabel: {
                                                    formatter: '{value} %',
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                        // width: 1,
                                                        // type: "solid"
                                                    }
                                                },
                                                splitLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                    }
                                                }
                                            }
                                        ],
                                        series: [
                                            {
                                                name: "发病率",
                                                type: "bar",
                                                barWidth: "50%",
                                                data: [data.jxfabinglv,data.lcfabinglv,data.zxfabinglv],
                                                itemStyle: {
                                                    normal:{
                                                        color: function (params){
                                                            var colorList = ['rgb(100,155,182)','rgb(173,91,91)','rgb(246,185,29)'];
                                                            return colorList[params.dataIndex];
                                                        }
                                                    },
                                                    barBorderRadius: 0,

                                                }
                                            }
                                        ]
                                    };

                                    // 使用刚指定的配置项和数据显示图表。
                                    myChart.setOption(option);
                                }
                            });


                        })
                        //筛查流调患病比例    县级以下左下
                        setTimeout(function (){
                            var myChart = echarts.init(document.querySelector(".bar .chart"));
                            myChart.clear();
                            $.ajax({
                                cache: true,
                                type: "GET",
                                async: false,
                                url: '/xinshineng/shouYe/HuanBingNumQD?checkCity=' + checkCity + '&checkArea=' + checkArea,
                                error: function (request) {
                                    parent.layer.alert("网络超时");
                                },
                                success: function (data) {
                                    // 指定配置和数据
                                    var option = {
                                        color: ["#2f89cf"],
                                        tooltip: {
                                            trigger: "axis",
                                            formatter: "{a} <br/>{b}: {c}%",
                                            axisPointer: {
                                                // 坐标轴指示器，坐标轴触发有效
                                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        grid: {
                                            left: "0%",
                                            top: "10px",
                                            right: "0%",
                                            bottom: "4%",
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: "category",
                                                data: ['视力低下','远视','临床前期','假性近视','真性近视'],
                                                axisTick: {
                                                    alignWithLabel: true
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    show: false
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: "value",
                                                min: 0,
                                                max: 100,
                                                axisLabel: {
                                                    formatter: '{value} %',
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                        // width: 1,
                                                        // type: "solid"
                                                    }
                                                },
                                                splitLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                    }
                                                }
                                            }
                                        ],
                                        series: [
                                            {
                                                name: "患病率",
                                                type: "bar",
                                                barWidth: "50%",
                                                data: [data.SLDX,data.YS,data.LCQQ,data.JXJS,data.ZXJS],
                                                itemStyle: {
                                                    barBorderRadius: 0,

                                                }
                                            }
                                        ]
                                    };

                                    // 把配置给实例对象
                                    myChart.setOption(option);
                                }
                            });

                        })
                        //不同年级近视患病率
                        setTimeout(function () {
                            var myChart = echarts.init(document.querySelector(".bra1 .chart"));
                            $.ajax({
                                cache: true,
                                type: "GET",
                                async: false,
                                url: '/xinshineng/shouYe/NianJiHuanBingLvQD?checkCity=' + checkCity + '&checkArea=' + checkArea,
                                error: function (request) {
                                    parent.layer.alert("网络超时");
                                },
                                success: function (data) {
                                    var option = {
                                        color: ["#2f89cf"],
                                        tooltip: {
                                            trigger: "axis",
                                            formatter: "{a} <br/>{b}: {c}%",
                                            axisPointer: {
                                                // 坐标轴指示器，坐标轴触发有效
                                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        grid: {
                                            left: "0%",
                                            top: "10px",
                                            right: "0%",
                                            bottom: "4%",
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: "category",
                                                data: ['一年级', '二年级', '三年级', '四年级', '五年级','六年级'],
                                                axisTick: {
                                                    alignWithLabel: true
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    show: false
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: "value",
                                                min: 0,
                                                max: 100,
                                                axisLabel: {
                                                    formatter: '{value} %',
                                                    textStyle: {
                                                        color: "rgba(255,255,255,.6)",
                                                        fontSize: "12"
                                                    }
                                                },
                                                axisLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                        // width: 1,
                                                        // type: "solid"
                                                    }
                                                },
                                                splitLine: {
                                                    lineStyle: {
                                                        color: "rgba(255,255,255,.1)"
                                                    }
                                                }
                                            }
                                        ],
                                        series: [
                                            {
                                                name: "患病率",
                                                type: "bar",
                                                barWidth: "50%",
                                                data: [data.oneBLv, data.twoBLv, data.threeBLv, data.fourBLv, data.fiveBLv,data.sixBLv],
                                                itemStyle: {
                                                    barBorderRadius: 0,

                                                }
                                            }
                                        ]
                                    };
                                    myChart.clear();
                                    // 把配置给实例对象
                                    myChart.setOption(option);
                                }
                            })
                        });

                    }
                });

                chart.setOption(option);
            }

        });


        //发病比例
        setTimeout(function (){
            var myChart = echarts.init(document.querySelector(".pie .chart"));
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/ManAndWomenCount?checkCity=' + checkCity + '&checkArea=' + checkArea,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    option ={
                        color: ["#2f89cf"],
                        tooltip: {
                            trigger: "axis",
                            formatter: "{a} <br/>{b}: {c}%",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: "0%",
                            top: "10px",
                            right: "0%",
                            bottom: "4%",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: ['假性近视','近视临床前期','真性近视'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                min: 0,
                                max: 100,
                                axisLabel: {
                                    formatter: '{value} %',
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                        // width: 1,
                                        // type: "solid"
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "发病率",
                                type: "bar",
                                barWidth: "50%",
                                data: [data.jxfabinglv,data.lcfabinglv,data.zxfabinglv],
                                itemStyle: {
                                    normal:{
                                        color: function (params){
                                            var colorList = ['rgb(100,155,182)','rgb(173,91,91)','rgb(246,185,29)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    barBorderRadius: 0,

                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });


        })
        //筛查患病比例   县级左下
        setTimeout(function (){
            var myChart = echarts.init(document.querySelector(".bar .chart"));
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/HuanBingNumQD?checkCity=' + checkCity + '&checkArea=' + checkArea,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    myChart.clear();
                    // 指定配置和数据
                    var option = {
                        color: ["#2f89cf"],
                        tooltip: {
                            trigger: "axis",
                            formatter: "{a} <br/>{b}: {c}%",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: "0%",
                            top: "10px",
                            right: "0%",
                            bottom: "4%",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: ['视力低下','远视','临床前期','假性近视','真性近视'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                min: 0,
                                max: 100,
                                axisLabel: {
                                    formatter: '{value} %',
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                        // width: 1,
                                        // type: "solid"
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "患病率",
                                type: "bar",
                                barWidth: "50%",
                                data: [data.SLDX,data.YS,data.LCQQ,data.JXJS,data.ZXJS],
                                itemStyle: {
                                    barBorderRadius: 0,

                                }
                            }
                        ]
                    };

                    // 把配置给实例对象
                    myChart.setOption(option);
                }
            });

        })
        //不同学部近视患病率 县级右上
        setTimeout(function () {
            var myChart = echarts.init(document.querySelector(".bra1 .chart"));
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/XueBuHuanBingLvQD?checkCity=' + checkCity,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    var option = {
                        color: ["#2f89cf"],
                        tooltip: {
                            trigger: "axis",
                            formatter: "{a} <br/>{b}: {c}%",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: "0%",
                            top: "10px",
                            right: "0%",
                            bottom: "4%",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: ['幼儿园', '小学', '初中', '高中', '总体'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                min: 0,
                                max: 100,
                                axisLabel: {
                                    formatter: '{value} %',
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: "12"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                        // width: 1,
                                        // type: "solid"
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "患病率",
                                type: "bar",
                                barWidth: "50%",
                                data: [data.youBLv, data.xiaoBLv, data.chuBLv, data.gaoBLv, data.zBLv],
                                itemStyle: {
                                    barBorderRadius: 0,

                                }
                            }
                        ]
                    };

                    // 把配置给实例对象
                    myChart.setOption(option);
                }
            })
        });

        //县级右下
        setTimeout(function () {
            $.ajax({
                cache: true,
                type: "GET",
                async: false,
                url: '/xinshineng/shouYe/ShiFanXiaoHuanBingLvQD?checkCity=' + checkCity,
                error: function (request) {
                    parent.layer.alert("网络超时");
                },
                success: function (data) {
                    var html1=`<h2>`+checkCity+checkArea+`城阳区学校近视率</h2>
                            <div class="hd">
                            <ul>
                            <li class="HHup" id="HHnext"><a class="next"></a></li>
                            <li class="HHdown" id="HHprev"><a class="prev"></a></li>
                            <li>序号</li>
                            <li>示范学校</li>
                            <li>近视率</li>
                            </ul>
                            </div>
                            <div class="bd">
                            <ul class="infoList">`;
                    var html2=``;
                    if (data.length>0){
                        for (let i = 0; i < data.length; i++) {
                            html2+=`<li><span class="num">`+(i+1)+`</span><span class="name">`+data[i].school+`</span><span class="shuL">`+data[i].HBL+`%</span></li>`
                        }
                    }
                    var html = html1+html2+`</ul></div>`;
                    $("#gundong").html(html);
                    jQuery(".HHMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:7,interTime:50});
                }
            })
        })

    };




    //====================弹框里的折线图========================
    /*$(".lookat").click(function(){
          $("#popLine").show();
          $(".popBlack").show();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".line .chart"));
        option = {
          tooltip: {
            trigger: "axis",
              formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
              axisPointer: {
              lineStyle: {
                color: "#dddc6b"
              }
            }
          },
          legend: {
            top: "2%",
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "15"
            }
          },
          grid: {
            left: "10",
            top: "50",
            right: "25",
            bottom: "0",
            containLabel: true
          },

          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: 15
                }
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.2)"
                }
              },

              data: [
                  "2014年",
                  "2015年",
                  "2016年",
                  "2017年",
                  "2018年",
                  "2019年",
                  "2020年",
                  "2021年"
              ]
            },
            {
              axisPointer: { show: false },
              axisLine: { show: false },
              position: "bottom",
              offset: 20
            }
          ],

          yAxis: [
            {
              type: "value",
              name:"单位：%",
              min: 0,
              max: 100,
              nameTextStyle:{//y轴上方单位的颜色
                            color:'#9dcfe2' ,
                            fontSize:15
                          },
              axisTick: { show: false },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                }
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: 15
                }
              },

              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                }
              }
            }
          ],
          series: [
            {
              name: "临床前期",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  color: "#0184d5",
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(1, 132, 213, 0.4)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(1, 132, 213, 0.1)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)"
                }
              },
              itemStyle: {
                normal: {
                  color: "#0184d5",
                  borderColor: "rgba(221, 220, 107, .1)",
                  borderWidth: 12
                }
              },
              data: [
                  26,25,29,26,27,34,28,64
              ]
            },{
              name: "假性近视",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  color: "#00d887",
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 216, 135, 0.4)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 216, 135, 0.1)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)"
                }
              },
              itemStyle: {
                normal: {
                  color: "#00d887",
                  borderColor: "rgba(221, 220, 107, .1)",
                  borderWidth: 12
                }
              },
              data: [
                  7,4,8,6,12,13,13,28
              ]
            },{
              name: "真性近视",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  color: "#ffeb7b",
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(255, 235, 123, 0.4)"
                      },
                      {
                        offset: 0.8,
                        color: "rgba(255, 235, 123, 0.1)"
                      }
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)"
                }
              },
              itemStyle: {
                normal: {
                  color: "#ffeb7b",
                  borderColor: "rgba(221, 220, 107, .1)",
                  borderWidth: 12
                }
              },
              data: [
                  35,49,33,29,25,30,26,36
              ]
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });

      });
        $(".popBlack").click(function(){
              $("#popLine").hide();
              $(".popBlack").hide();
          })*/
    //总数
    $.ajax({
        cache: true,
        type: "GET",
        async: false,
        url: '/xinshineng/shouYe/DataQD',
        error: function (request) {
            parent.layer.alert("网络超时");
        },
        success: function (data) {
            var totalNum = data.totalNum ;
            $("#totalNum").text(totalNum);
            $("#shaiChaNum").text(data.shaiChaNum);
            $("#liuDiaoNum").text(data.liuDiaoNum);
        }
    })


</script>

</body>

</html>